<!-- 学习记录 -->
<template>
	<div class="page_content" v-loading="courseList.length === 0">
		<div class="top_tab df ac">
			<img src="@/assets/images/study.png" alt=""> 学习记录
		</div>
		<div class="stydy_swiper">
			<div class="cut left_cut df ac jc">
				<el-icon color="#999999">
					<ArrowLeft />
				</el-icon>
			</div>
			<swiper :autoplay="autoPlaySet" :loop="true" effect="slide" class="swiperBox" :modules="modules" :speed="1000"
				v-if="courseList.length > 0" :navigation="navigationSet" :pagination="paginationSet">
				<swiper-slide style="width: 100%;" v-for="(item, index) in courseList" :key="index">
					<div class="study_list" style="width: 100%;">
						<div class="course_item df" v-for="item1 in item" :key="item1.id" @click="go(item1)">
							<div class="image">
								<el-image style="width: 100%; height: 100%; border-radius: 10px 0 0 10px" :src="item1.cover"
									fit="cover" />
							</div>
							<div class="item_box df fdc jsb">
								<div class="row-bg row2">
									{{ item1.title }}
								</div>
								<div class="row-bgs df ac">
									<el-avatar v-if="item1.publisherAvatar" :size="26" :src="item1.publisherAvatar" />
									<el-avatar v-else :size="26" src="/src/assets/images/gir.png" />
									<div class="timer" style="margin-left: 5px;">{{ item1.publisher }}</div>
									<div class="timer" style="margin-left: auto;">时长 {{ convertSecondsToHMS(item1.totalTimes) }}</div>
									<div class="timer" style="margin-left: 5px;">学习进度{{ item1.percentage }}</div>
								</div>
							</div>
						</div>
					</div>
				</swiper-slide>
			</swiper>
			<div class="pagination"></div>
			<div class="cut right_cut df ac jc">
				<el-icon color="#999999">
					<ArrowRight />
				</el-icon>
			</div>
		</div>

	</div>
</template>

<script setup lang="ts">
import api from '@/api/api';
import { convertSecondsToHMS } from '@/utils/utils';
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import { EffectFade, Pagination, Navigation } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/effect-fade';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import { useRouter } from 'vue-router';
//组件命名-----
defineOptions({ name: "study-item-index" })
const courseList = ref<any>([])
/**
 * 我的学习记录
 *
 * @returns Promise<void> 无返回值，但会更新课程列表并初始化轮播图
 */
const MyCourseList = async () => {
	const res = await api.MyCourseList_API({ "limit": 10, "page": 1 })
	if (res.code == 0) {
		const data = res.data.data
		let combinedArray: any = [];
		for (let i = 0; i < data.length; i += 2) {
			// 检查是否还有足够的元素来组成一对
			if (i + 1 < data.length) {
				combinedArray.push([data[i], data[i + 1]]);
			} else {
				// 如果只剩下一个元素，则单独作为一个数组
				combinedArray.push([data]);
			}
		}
		courseList.value = combinedArray
	}
}
onMounted(async () => {
	await MyCourseList()
})
const modules = [EffectFade, Pagination, Navigation]

const autoPlaySet = {
	delay: 2000,//间隔2秒
	stopOnLastSlide: false,//自动播放将在到达最后一张幻灯片时停止（在循环模式下不起作用）
	disableOnInteraction: false,
	pauseOnMouseEnter: true
}
//自定义左右切换
const navigationSet = {
	nextEl: '.right_cut',
	prevEl: '.left_cut',
}
const paginationSet = {
	el: '.pagination',
	clickable: true
}
const router = useRouter()
const go = (row: any) => {
	router.push({
		path: 'videoc',
		query: {
			courseId: row.id,
			courseType: row.courseType
		}
	})
}
</script>

<style lang="scss" scoped>
.top_tab {
	padding: 30px 0;
	font-size: 24px;

	img {
		width: 26px;
		object-fit: contain;
		height: 24px;
		margin-right: 10px;
	}
}

.study_list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
}

.stydy_swiper {
	position: relative;

	.cut {
		width: 35px;
		height: 59px;
		position: absolute;
		z-index: 888;
		background-size: contain;
		top: 40px;
		border-radius: 5px;
		background-color: #ffffff;
		box-shadow: 0px 2px 3px 0px #999999;
		cursor: pointer;

		&:hover {
			background-color: $bcolor ;

			:deep(.el-icon) {
				color: $white;
			}
		}
	}

	.left_cut {
		left: -15px;
	}

	.right_cut {
		right: -15px;
	}
}

.pagination {
	padding-bottom: 20px;
	text-align: center;
}

.swiperBox {
	width: 100%;
}

.course_item {
	cursor: pointer;
	width: 100%;
	border: 1px solid $dcolor;
	border-radius: 10px;
	height: 140px;

	&:nth-child(4n -3) {
		margin-left: 0;
	}

	.image {
		width: 248px;
		height: 100%;
	}

	.item_box {
		padding: 20px;
		flex: 1;
	}

	.timer {
		color: $color1;
		font-size: 14px;
	}
}
</style>
